<template>
  <div class="shopDetail">
    <header class="top">
      <span @click="goBack">返回</span>
      <span>商家详细</span>
    </header>
    <!-- 活动与属性 -->
    <section class="activity">
        <h3 class="title">活动与属性</h3>
        <p v-for="(v,i) in shopActive" :key="i">
            <span v-if="v.description&&v.id!=5" class="icon" v-text="v.icon_name"></span>
            <span v-if="v.description&&v.id!=5" v-text="v.description+'(APP专享)'" class="description"></span>
        </p>
    </section>
    <!-- 食品监督安全公示 -->
    <!-- <section class="supervise">
        <h3 class="title">食品监督安全公示</h3>
        <div class="emo" >
        </div>
        <div class="result">
          <p v-text="'检查监督结果'"></p>
          <p v-text="'检查日期:'"></p>
        </div>
    </section> -->
<!-- 商家信息 -->
<section class="shopMsg">
        <h3 class="title">商家信息</h3>
        <p v-text="shop.name"></p>
        <p v-text="'地址:'+shop.address"></p>
        <p v-text="'营业时间：'+shop.opening_hours"></p>
        <van-cell is-link @click="showPopup">营业执照</van-cell>
<van-popup v-model="show"><img :src="shop.license" alt=""></van-popup>
<van-cell is-link @click="showPopup1">餐饮服务许可证</van-cell>
<van-popup v-model="show1">
  <img :src="shop.license" alt="">
</van-popup>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
name:'shopDetail',
data(){
    return{
      show:false,
      show1:false,
        shopActive:{},//商家活动与属性
    }
},
created(){
    console.log(this.shop);
    this.getShopActivity();//获取商家属性
},
methods:{
        //返回上一頁
    goBack() {
      this.$router.back();
    },
    getShopActivity(){
       let api=this.eleUrl.shopActivity;
       this.$http({
         url:api,
         methods:"get"
       }).then((res)=>{
         this.shopActive=res.data
         console.log(res.data)
       })
    },
    // 展示弹出层
       showPopup() {
      this.show = true;
    },
           showPopup1() {
      this.show1 = true;
    },
},
  computed: {
    ...mapState(["shop", "eleUrl"]),
  },
}
</script>

<style scoped>
.shopDetail{
  font-size: 0.15rem;
  background-color: rgb(236, 236, 236);
}
/* 头部 */
.top {
  height: 0.4rem;
  width: 100%;
  background-color: rgb(80, 143, 238);
}
.top > span {
  color: white;
  line-height: 0.4rem;
  margin-left: 0.2rem;
}
.top > span:nth-child(2) {
  margin-left: 1.2rem;
  font-weight: bold;
}
.shopDetail section{
margin-top: .1rem;
}
/* 活动与属性 */
.activity{
    background-color: #fff;
}
.title{
    font-size: .2rem;
   padding: .1rem;
   border-bottom: .01rem solid rgb(223, 223, 223);
}
.icon{
  display: inline-block;
  width: .18rem;
  height: .18rem;
  margin: .05rem .1rem ; 
  text-align: center;
  line-height: .2rem;
  color: white;
  border-radius: .02rem;
  background-color: rgb(185, 185, 185);
}
.activity>p:nth-of-type(2)>span:nth-child(1){
  background-color: rgb(245, 94, 94);
}
.activity>p:nth-of-type(5)>span:nth-child(1){
  background-color: rgb(40, 122, 245);
}
.description{
  font-size: .1rem;
  color: gray;
}
/* 营业执照 */
.van-popup{
  width: 2rem;
  height: 2rem;
  background-color: #fff;
}
.van-popup>img{
  width: 100%;
  height: 100%;
}
/* 商家信息 */
.shopMsg{
  background-color: #fff;
}
.shopMsg>p{
  border-bottom: .001rem solid rgb(247, 245, 245);
  padding: 0.05rem .15rem;
  line-height: .3rem;
  font-size: .15rem;
  color: gray;
}
.van-cell__value{
  color: gray;
  font-size: .15rem;
}
</style>